<template>
    <div class="page staff_add">
        <nav-bar title="新增店员" @click-left="$router.back()"></nav-bar>
        <div class="con">
            <van-field v-model="formData.name" label="员工姓名" placeholder="请输入员工姓名" />
            <verify-code inputAlign="left" ref="verCodeRef"></verify-code>
            <div class="butt_con gshadow2">
                <van-button type="info" size="large" @click="addStaffAction">确定添加</van-button>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState } from 'vuex';
import VerifyCode from "@/components/form/verify-code";

export default {
    name: "staffAdd",
    components: { VerifyCode },

    data() {
        return {
            formData: {
                name: "",
            },
        }
    },

    provide: function () {
        return {
            sendCode: this.sendCode
        }
    },


    methods: {
        // 发送验证码
        sendCode(mobile) {
            let _mobilePhone = mobile;
            if (this.$check.start(_mobilePhone, "手机号").isNull().isTell().endShow()) {
                return Promise.resolve(false);
            }
            let params = {
                mobilePhone: _mobilePhone,
            }
            return this.$http.staffSmsCode(params);
        },

        // 添加店员
        addStaffAction() {
            const _mobilePhone = this.$refs.verCodeRef.mobilePhone;
            const _smsCode = this.$refs.verCodeRef.smsCode;
            const params = {
                mobilePhone: _mobilePhone,
                name: this.formData.name,
                smsCode: _smsCode
            }
            this.$http.staffAdd(params).then(respData => {
                if (respData === false) {
                    return;
                }
                this.$router.back();
            });
        }

    },

    computed: {
        ...mapState({
            userRole: state => state.userRole,
        })
    },

};
</script>

<style lang="scss" scoped>
.staff_add {
    width: 100%;
    .con {
        padding: 10px;
    }

    .butt_con {
        margin: 10px 0;
    }
}
</style>
